<template>
  <div style="overflow: hidden">
    <div>
      <el-form :inline="true"
               size="mini"
               style="height: 40px">
        <el-form-item>
          <report-select-way v-model="selectTime"></report-select-way>
        </el-form-item>
        <el-form-item>
          <el-input autosize
                    @keyup.enter.native="handleNodeClick"
                    v-model="pagination.params.searchValue"
                    placeholder="工单分类/工单类别"
                    clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="handleNodeClick">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="exportToExcel">导出excel</el-button>
        </el-form-item>
      </el-form>
    </div>

    <dd-table height="calc(100vh - 200px)"
              :data="tableData"
              :config="config"
              border
              :loading="loading"
              @filter-change="filterHandler"
              :current-page="pagination.currentPage"
              :total="pagination.total"
              @current-change="changePage"
              :page-size="pagination.pageSize"
              @size-change="handleSizeChange">
    </dd-table>

  </div>
</template>
<script>
import commonApi from '@/api/common'
import { Notification } from 'element-ui'
// 全行工单统计表
export default {
  data () {
    return {
      selectTime: {},
      loading: false,
      // 表格配置
      config: [
        {
          label: '序号',
          prop: 'indexnum',
          width: '60'
        },
        {
          label: '日期',
          prop: 'ldate',
          'show-overflow-tooltip': true
        },
        {
          label: '工单分类',
          prop: 'orderType',
          'show-overflow-tooltip': true,
          'column-key': 'group',
          'filters': []
        },
        {
          label: '工单类别',
          prop: 'orderCateg',
          'show-overflow-tooltip': true

        },
        {
          label: '受理量',
          prop: 'acceptNum',
          'show-overflow-tooltip': true
        },
        {
          label: '处理量',
          prop: 'processNum',
          'show-overflow-tooltip': true
        },
        {
          label: '处理率',
          prop: 'processRate',
          'show-overflow-tooltip': true
        },
        {
          label: '超时未处理',
          prop: 'timeoutNum',
          'show-overflow-tooltip': true
        },
        {
          label: '受理所占比例',
          prop: 'acceptRate',
          'show-overflow-tooltip': true
        }
      ],
      tableData: [],
      pagination: {
        currentPage: 1,
        total: 0,
        pageSize: 20,
        // 0 不导出 1导出
        isExport: '0',
        params: {
          reportType: '',
          selectTime: [],
          group: []
        }
      }
    }
  },
  mounted () {
    this.pagination.params.selectTime = ['', '']
    this.pagination.params.reportType = 'day'
    this.getTableData()
  },
  // computed: {
  //   getHeight () {
  //     return this.$store.state.common.tableHeight
  //   }
  // },
  methods: {
    // 导出excel表
    exportToExcel () {
      this.pagination.isExport = '1'
      // excel数据导出
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/utils/vendor/Export2Excel.js')
        const tHeader = ['序号', '日期', '工单分类', '工单类别', '受理量', '处理量', '处理率', '超时未处理', '受理所占比例']
        const filterVal = ['indexnum', 'ldate', 'orderType', 'orderCateg', 'acceptNum',
          'processNum', 'processRate', 'timeoutNum', 'acceptRate']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '全行工单统计表')
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    filterHandler (val) {
      this.pagination.params.group = val['group']
      this.getTableData()
    },
    handleNodeClick () {
      this.pagination.params.selectTime = this.selectTime.selectTime
      this.pagination.params.reportType = this.selectTime.reportType
      this.pagination.params.group = []
      this.getTableData()
    },
    // 错误通知
    errorNotify () {
      this.$notify.error({
        title: '错误',
        message: '请输入起止时间'
      }
      )
    },
    // 切换页码
    changePage (val) {
      this.pagination.currentPage = val
      this.getTableData()
    },
    // 可以调整每页条数
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    // 获取数据表
    getTableData () {
      this.loading = true
      // 0 不导出 1导出
      this.pagination.isExport = '0'
      // 参数有待确认
      commonApi.getAllEwsCountTable(this.pagination).then(response => {
        this.loading = false
        if (response.retcode === '0') {
          this.tableData = response.data.info
          this.pagination.total = response.data.total
          this.config[2].filters = response.data.filterList
        } else {
          this.$message({
            showClose: true,
            message: '数据返回失败',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.left {
  float: left;
  width: 20%;
  border: 1px solid #1f92ef;
}

.right {
  float: left;
  width: 79%;
  border: 1px solid #1f92ef;
}
</style>
